<!DOCTYPE html>
<html xmlns:th=”http://www.thymeleaf.org”>
<head>

    <title>角色管理</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap-all.css">
    <script src="/js/bootstrap-all.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 系统CSS或JS -->
    <link rel="stylesheet" href="/css/system.css">

</head>
<style>

</style>
<script type="application/javascript">




</script>
<body>
<div id="app">
<div  id="container"  style="width:100%;" >
    <div class='row'>

            <h4>角色管理&nbsp;&nbsp;&nbsp;&nbsp;<small>角色菜单权限</small></h4>

    </div>
    <div class='bh2'></div>

    <div class='bg-content'>
        <form id="form-role" action="/role/rightMenus" method="get">

            <div class='bh2'></div>
            <div class='row'>
                <div class="col-sm-2">角色编码： <input v-model="roleCode" type='text' placeholder="请输入角色编码"/></div>
            </div>

            <button  class="mybtn bg-primary" @click="getRoleRight()" type="button"  id="getRoleRight" >查询菜单权限</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button  class="mybtn bg-primary" @click="saveRight()" type="button"  id="saveRight" >保存</button>
        </form>

    </div>


    <div class='bh5'></div>
    <div class='bg-content'>
        <div>角色表结果：</div>
        <div class='bh2'></div>
        <div>
            <table
                    class="table table-striped table-bordered table-hover  table-sm">
                <thead>
                <tr>
                    <th><input type="checkbox" v-model="isALl" class='checkbox'  style='top:3px;margin-right:5px;'>全选</th>
                    <th>菜单编码</th>
                    <th>菜单名称</th>
                    <th>角色编码</th>

                </tr>

                </thead>
                <tr v-for="item in menuListSel">
                    <td><input type="checkbox" v-model="item.isSelected" / class='checkbox' style='top:3px;'></td>
                    <td>{{item.nodecode}}</td>
                    <td>{{item.nodename}}</td>
                    <td>{{roleCode}}</td>

                </tr>

            </table>

        </div>


    </div>
</div>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        created() {
            console.log('this is lifecycle method');
        },
        data: {
            roleCode:'',
            rightMenusList:[],
            menuList:[],
            menuListSel:[]


        },
        methods: {
            getRoleRight(){
                this.menuListSel=[];
                axios.get("/role/rightMenus?rolecode="+this.roleCode).then((res)=>{
                    let data=res.data;

                    this.rightMenusList=data.rightMenusJson;
                    this.menuList=data.menuJson;
                    this.menusGetRight();//调用其他方法加this
                });
                // console.log(data);
            },
            menusGetRight(){
                // console.log(this.menuList);

                this.menuList.forEach((item)=>{
                    let nodecode=item.nodecode;
                    let isSelected=false;
                    this.rightMenusList.forEach((item1)=>{
                        if(item1.nodecode==nodecode){
                            isSelected=true;
                        }
                    });
                    //每一项都添加属性并赋予到新的数组
                    this.menuListSel.push(Object.assign({},item,{isSelected:isSelected}))
                });

                // console.log(this.menuListSel);
            },
            saveRight(rolecode){
                alert('开始保存');

            }
        },
        computed:{//计算属性
            isALl:{
                get(){
                    return this.menuListSel.every(item=>item.isSelected);
                },   set(value){
                    this.menuListSel.forEach((item)=>{
                        item.isSelected=value;
                    })
                }

            }
        }
    })
</script>
</body>
</html>